import { Swiper, Ellipsis, PullToRefresh, List } from 'antd-mobile';
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom';

import { getVolunteerBanner, getVolunteerNews } from './api/volunteerService'
import './css/volunteer.less'

export default function VolunteeHome() {

    // 广告轮播图
    const [bannerList, setBannerList] = useState([])
    // 新闻列表
    const [newsList, setNewsList] = useState([])
    // 评论页数
    const [pageNum, setPageNum] = useState(1)
    // 评论一页显示评论数量
    const [pageSize, setPageSize] = useState(10)
    // 总页数
    const [pages, setPages] = useState(1)

    const statusRecord: Record<any, string> = {
        pulling: '用力拉',
        canRelease: '松开吧',
        refreshing: '玩命加载中...',
        complete: '好啦',
    }

    // 获取轮播图列表
    async function getBanners() {
        const res = await getVolunteerBanner()
        // console.log(res);
        setBannerList(res.data.data)
    }

    // 获取分页新闻
    async function getNews(params: any) {
        const res = await getVolunteerNews(params)
        // console.log(res);
        // 下滑，合并数组
        setNewsList(res.data.rows.reverse().concat(newsList))
        setPages(Math.ceil(res.data.total / pageSize))
    }

    function refresh() {
        if (pageNum === pages) return
        getNews({ pageNum: pageNum + 1, pageSize })
        setPageNum(pageNum + 1)
    }

    useEffect(() => {
        getBanners()
        getNews({ pageNum, pageSize })
    }, [])


    // 跳转新闻详情
    const history = useHistory()
    function toDetail(id: any) {
        history.push('/voluntee/detail/' + id)
    }

    if (bannerList.length === 0) {
        return <div></div>
    }
    return (
        <div className='voluntee'>
            <PullToRefresh
                onRefresh={async () => {
                    refresh()
                }}
                renderText={status => {
                    return <div>{statusRecord[status]}</div>
                }}
            >
                <Swiper loop autoplay autoplayInterval={3000}>
                    {bannerList.map((item: any) => (
                        <Swiper.Item key={item.id}>
                            <img className='volunteer-banner-img' src={'http://124.93.196.45:10001/' + item.imgUrl} />
                        </Swiper.Item>
                    ))}
                </Swiper>


                <List style={{ minHeight: '100vh' }}>
                    {newsList.map((item: any, index: any) => (
                        <List.Item key={index}>
                            <div className='news-item' onClick={() => { toDetail(item.id) }}>
                                <img src={'http://124.93.196.45:10001/' + item.imgUrl} />
                                <div className='text-time'>
                                    <div>
                                        <Ellipsis direction='end' content={item.title} />
                                    </div>
                                    <div>{item.createTime}</div>
                                </div>
                            </div>
                        </List.Item>
                    ))}
                </List>
            </PullToRefresh>
        </div>
    )
}
